<template>
	<rh-wx class="my-detail-write-off-container">
		<template>
			<view class="top-content flex-between">
				<image class="card-icon" :src="baseData['activity']['coverUrl']"></image>
				<text class="label-txt">{{baseData['activity']['activityName']}}</text>
				<text class="num-txt">剩余次数：{{baseData.residueCount}}</text>
			</view>
			<view class="qrcode-content flex-column">
				<text class="qrcode-label">核销二维码</text>
				<view class="qrcode-val">
					<rh-qrcode :qrcode="baseData.iCarCode"></rh-qrcode>
				</view>
			</view>
			<view class="gz-content">
				<view class="gz-label flex-between">
					<text class="label-txt">核销规则</text>
				</view>
				<view class="gz-main flex-normal">
					<text class="item-txt">本二维码仅限：</text>
					<text class="item-txt">{{baseData.plateNumber}} / {{baseData.vehicleIdentificationNumber}} 使用</text>
				</view>
				<view class="gz-main flex-normal">
					<text class="desc-bar">每月仅限使用一次</text>
				</view>
			</view>
			<view class="tc-content" v-if="baseData.serves && baseData.serves.length">
				<view class="tc-label flex-between">
					<text class="label-txt">套餐内容</text>
					<text class="label-btn" 
					v-if="baseData['refundStatus']"
					@click="jumpUrl('cardRefund')">申请退款</text>
				</view>
				<view class="tc-list">
					<view class="item flex-between" v-for="item in baseData.serves" :key="item.id">
						<text class="item-txt">{{item.serveName}}</text>
						<text class="item-txt">到期时间：{{item.endTime}}</text>
					</view>
				</view>
			</view>
			<view class="store-address-content" v-if="baseData.shops && baseData.shops.length">
				<view class="store-label">支持门店</view>
				<div class="store-list">
					<div class="store-item flex-between" 
					v-for="shop in baseData.shops" :key="shop.id">
						<image class="store-icon" :src="shop.image" @click="openMap(shop)"></image>
						<view class="store-main flex-column" @click="openMap(shop)">
							<text class="store-label ellipsis-1">{{shop.shopName}}</text>
							<text class="store-desc ellipsis-1">{{shop.shopAddress}}</text>
						</view>
						<view class="store-other flex-column">
							<view class="other-icon flex-between"> 
								<u-icon @click="callPhone(shop)" name="phone" color="#3C3ED0" size="32"></u-icon>
								<u-icon @click="openMap(shop)" v-if="vuex_locationVO" name="map" color="#3C3ED0" size="32"></u-icon>
							</view>
							<text @click="openMap(shop)" v-if="vuex_locationVO" class="other-desc">{{ shop.latitudeAndLongitude | distance(vuex_locationVO) }}km</text>
						</view>
					</div>
				</div>
			</view>
			<view class="desc-content" v-if="notes && notes.length">
				<view class="desc-label">活动须知</view>
				<view class="desc-list">
					<view class="item" v-for="str in notes" :key="str">
						{{str}}
					</view>
				</view>
			</view>
		</template>
	</rh-wx>
</template>

<script>
	import {isWechat} from '@/script/wx-premission.js'
	import { getDistance } from '@/script/location.js'
	import {getCardDetail} from '@/api/card/index.js'
	import wechat from '@/script/wechat.js'
	import { mapGetters, mapActions } from 'vuex'
	export default {
		data() {
			return {
				isWechat: isWechat(),
				baseData: {
					activity: {},
					serves: [],
					shops: [],
					status: -1
				},
				location: null,
			}
		},
		filters: {
			distance(latitudeAndLongitude, location){
				if(!latitudeAndLongitude) return '---'
				let arr = latitudeAndLongitude.split(',')
				let point = {latitude: arr[0], longitude: arr[1]}
				let mark = {latitude: location.lat, longitude: location.lng}
				return getDistance(point, mark)
			}
		},
		computed: {
			...mapGetters(['vuex_locationVO']),
			notes(){
				let _self = this, {remarks = ''} = this.baseData.activity
				let arr = (remarks || '').split(/[(\r\n)\r\n]+/), list = []
				arr.forEach((i, idx) => {
					if(i.trim() != ''){
						list.push(i)
					}
				})
				return list
			},
		},
		onLoad(e){
			if(!this.isWechat) return
			let {id = ''} = e, _self = this
			if(!id || id == '') return
			_self.showWxApp().then(boo => {
				_self.queryCardDetail(id)
				_self.setLocation()
			})
		},
		methods: {
			...mapActions(['setLocation']),
			callPhone(shop){
				uni.makePhoneCall({
					phoneNumber: shop['csTel']
				})
			},
			openMap(shop){
				let _self = this
				const {latitudeAndLongitude, shopAddress, shopName} = shop
				let arr = latitudeAndLongitude.split(',') || []
				let params = {
					name: shopName,
					address: shopAddress,
					latitude: parseFloat(arr[0] || '0'),
					longitude: parseFloat(arr[1] || '0')
				}
				if (wechat?.isWechat()) {
					wechat.callOpenLocation(params)
				}
			},
			getLocation(){
				let _self = this
				_self.$attention.noIcon('定位')
				wechat.callLocation((location) => {
					_self.location = location
					// _self.$attention.noIcon(JSON.stringify(location))
					// _self.$set(shop, 'distace', location.distace)
				}, (err) => {
					_self.$attention.noIcon(err)
				})
			},
			jumpUrl(name){
				let _self = this
				let query = {id: _self.baseData.orderId}
				_self.$$router.push({name, query})
			},
			queryCardDetail(id){
				let _self = this
				getCardDetail(id).then(res => {
					let {shops, orderId = ''} = res.data, shopArr = []
					let iCarCode = `http://subscriber.aicheduoduo.com/pages/store/write-off?id=${orderId}`
					shopArr = shops.map(i => {
						let image = '';
						try{
							let imageArr = JSON.parse(i.shopPhoto)
							image = imageArr[0] ? imageArr[0]['url'] : ''
						}catch(e){
							//TODO handle the exception
						}
						return {
							csTel: i.csTel,
							shopAddress: i.shopAddress,
							shopName: i.shopName,
							image: image,
							latitudeAndLongitude: i.latitudeAndLongitude
						}
					})
					_self.baseData = res.data
					_self.baseData['shops'] = shopArr
					_self.baseData['iCarCode'] = iCarCode
				})
			}
		}

	}
</script>
<style lang="scss" scoped>
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.my-detail-write-off-container{
		min-height: 100vh;
		background-color: #F4F8F9;
		padding: 0 20rpx;
		.top-content{
			padding-top: 66rpx;
			.card-icon{
				width: 86rpx;
				height: 54rpx;
				border-radius: 6rpx;
				background-color: #fff;
			}
			.label-txt{
				margin-left: 30rpx;
				flex: 1;
				@include fontStyle(#3E3E3E, 32rpx);
			}
			.desc-txt{
				@include fontStyle(#000, 24rpx);
			}
		}
		.store-address-content{
			margin-top: 22rpx;
			padding: 28rpx 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			.store-label{
				@include fontStyle(#3D3D3D, 32rpx);
			}
			.store-list{
				.store-item{
					padding: 28rpx 0;
				}
			}
			.store-icon{
				width: 114rpx;
				height: 114rpx;
				background-color: #F4F8F9;
				border-radius: 6rpx;
				overflow: hidden;
			}
			.store-main{
				// flex: 1;
				margin-left: 28rpx;
				width: 400rpx;
				.store-label{
					@include fontStyle(#3D3D3D, 28rpx);
				}
				.store-desc{
					margin-top: 24rpx;
					@include fontStyle(#181818, 24rpx);
				}
			}
			.store-other{
				align-items: center;
				.other-icon{
					width: 100rpx;
					height: 46rpx;
					border-radius: 50%;
					background-color: #F4F8F9;
					overflow: hidden;
				}
				.other-desc{
					margin-top: 20rpx;
					@include fontStyle(#3C3ED0, 24rpx);
				}
			}
		}
		.qrcode-content{
			align-items: center;
			margin-top: 22rpx;
			padding: 20rpx 20rpx 40rpx;
			background-color: #fff;
			border-radius: 12rpx;
			.qrcode-label{
				width: 100%;
				text-align: left;
				@include fontStyle(#3D3D3D, 32rpx);
			}
			.qrcode-val{
				margin-top: 40rpx;
			}
		}
		.gz-content{
			align-items: center;
			margin-top: 22rpx;
			padding: 20rpx 20rpx 40rpx;
			background-color: #fff;
			border-radius: 12rpx;
			.gz-label{
				.label-txt{
					@include fontStyle(#3D3D3D, 32rpx);
				}
			}
			.gz-main{
				flex: 1;
				margin-top: 32rpx;
				.item-txt{
					@include fontStyle(#2774a9, 28rpx);
				}
				.desc-bar{
					@include fontStyle(#999, 24rpx);
				}
			}
		}
		.tc-content{
			align-items: center;
			margin-top: 22rpx;
			padding: 20rpx 20rpx 40rpx;
			background-color: #fff;
			border-radius: 12rpx;
			.tc-label{
				.label-txt{
					@include fontStyle(#3D3D3D, 32rpx);
				}
				.label-btn{
					@include fontStyle(#0003AA, 24rpx);
				}
			}
			.tc-list{
				flex: 1;
				margin-top: 32rpx;
				.item{
					margin-bottom: 26rpx;
					&:last-child{
						margin-bottom: 0;
					}
					.item-txt{
						@include fontStyle(#7F7F7F, 28rpx);
					}
				}
			}
		}
		.desc-content{
			margin-top: 30rpx;
			padding: 0 20rpx 40rpx;
			.desc-label{
				@include fontStyle(#3D3D3D, 32rpx);
			}
			.desc-list{
				margin-top: 32rpx;
				.item{
					margin-bottom: 10rpx;
					text-align: justify;
					@include fontStyle(#3D3D3D, 28rpx);
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>


